<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#first{
			width: 50px;
			height: 50px;
			background-color: red;
			position: absolute;
		}
		#box{
			width: 800px;height: 800px;
			background-color: blue;
			position: relative;
			overflow: hidden;
			margin-top: 200px;
			margin-left: 200px;
		}
		.item{
			width: 20px;
			height: 20px;
			background-color: red;
			text-align: center;
			color: white;
			line-height: 20px;
			position: absolute;
			left: 0px;top: 0px;
		}
	</style>
</head>
<body>
<div id="box">
	<div id="first"></div>
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
	<div class="item">12</div>
	<div class="item">13</div>
	<div class="item">14</div>
	<div class="item">15</div>
	<div class="item">16</div>
	<div class="item">17</div>
	<div class="item">18</div>
	<div class="item">19</div>
	<div class="item">20</div>
</div>
</body>
<script type="text/javascript">
var first = document.getElementById("first");
var box = document.getElementById("box");
var timeId=0;
first.onclick = function(){ 
	clearTimeout(timeId);
	timeId = setTimeout(function() {
		// 单机事件里的代码
    	console.log("点击查看详情");
  	},300);
}
first.ondblclick = function(){
	clearTimeout(timeId);
	console.log("老铁，双击666");
}
// box.onmousemove = function(ev){
// 	var x = 0;
// 	var y = 0;
// 	if (ev.target == this) {
// 		x = ev.offsetX;
// 		y = ev.offsetY;
// 	} else {
// 		x = ev.offsetX + ev.target.offsetLeft;
// 		y = ev.offsetY + ev.target.offsetTop;
// 	}
// 	first.style.left=x+"px";
// 	first.style.top=y+"px";
// 	first.style.marginLeft=-1*(first.offsetWidth/2)+"px";
// 	first.style.marginTop=-1*(first.offsetHeight/2)+"px";
// }
var divS=document.getElementsByClassName("item");
box.onmousemove = function(ev){
	var x = 0;
	var y = 0;
	if (ev.target == this) {
		x = ev.offsetX;
		y = ev.offsetY;
	} else {
		x = ev.offsetX + ev.target.offsetLeft;
		y = ev.offsetY + ev.target.offsetTop;
	}
	divS[0].style.left = x + "px";
	divS[0].style.top = y + "px";
	divS[0].style.marginLeft=-1*(divS[0].offsetWidth/2)+"px";
	divS[0].style.marginTop=-1*(divS[0].offsetHeight/2)+"px";
	for (var i = divS.length-1; i > 0; i--) {
		divS[i].style.left = divS[i - 1].style.left;
		divS[i].style.top = divS[i - 1].style.top;
		divS[i].style.marginLeft=-1*(divS[i].offsetWidth/2)+"px";
		divS[i].style.marginTop=-1*(divS[i].offsetHeight/2)+"px";
	}
}
	
</script>
</html>